<template>
  <a-card class="j-inner-table-wrapper" :bordered="false">

    <!-- 查询区域 begin -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="年度">
              <j-dict-select-tag v-model="queryParam.year" placeholder="请选择年度" dictCode="year"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span class="table-page-search-submitButtons table-operator">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" @click="searchReset">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                <span>{{ toggleSearchStatus ? '收起' : '展开' }}</span>
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域 end -->

    <!-- 操作按钮区域 begin -->
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
<!--      <a-button type="primary" icon="download" @click="handleExportXls('安全奖及未休奖补贴提交')">导出</a-button>-->
<!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
<!--        <a-button type="primary" icon="import">导入</a-button>-->
<!--      </a-upload>-->
      <!-- 高级查询区域 -->
<!--      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>-->
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete"/>
            <span>删除</span>
          </a-menu-item>
        </a-menu>
        <a-button>
          <span>批量操作</span>
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>
    <!-- 操作按钮区域 end -->

    <!-- table区域 begin -->
    <div>

      <a-alert type="info" showIcon style="margin-bottom: 16px;">
        <template slot="message">
          <span>已选择</span>
          <a style="font-weight: 600;padding: 0 4px;">{{ selectedRowKeys.length }}</a>
          <span>项</span>
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </template>
      </a-alert>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{x:true}"
        :loading="loading"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :expandedRowKeys="expandedRowKeys"
        :rowSelection="{selectedRowKeys, onChange: onSelectChange}"
        @expand="handleExpand"
        @change="handleTableChange"
      >

        <!-- 内嵌table区域 begin -->
        <template slot="expandedRowRender" slot-scope="record">
          <a-tabs tabPosition="top">
            <a-tab-pane tab="安全奖及未休奖补贴" key="cwAqhjwxjbt" forceRender>
              <cw-aqhjwxjbt-sub-table :record="record"/>
            </a-tab-pane>
          </a-tabs>
        </template>
        <!-- 内嵌table区域 end -->

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <template slot="imgSlot" slot-scope="text,record">
          <div style="font-size: 12px;font-style: italic;">
            <span v-if="!text">无图片</span>
            <img v-else :src="getImgView(text)" :preview="record.id" alt="" style="max-width:80px;height:25px;"/>
          </div>
        </template>


        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            ghost
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)"
          >
            <span>下载</span>
          </a-button>
        </template>

        <!-- 操作列：待审批状态仅显示审批详情，无任何分界线 -->
        <template slot="action" slot-scope="text, record" class="action-buttons">
          <!-- 1. 编辑按钮：排除【通过】【待审批】状态 -->
          <template v-if="record.state !== '通过' && record.state !== '待审批'&& record.state !== '第一人审批同意'">
            <a @click="handleEdit(record)" class="action-item">编辑</a>
          </template>

          <!-- 2. 编辑-提交分界线：仅在【有编辑按钮】且【有提交按钮】时显示（排除通过/待审批） -->
          <template v-if="
            record.state !== '通过' &&
            record.state !== '待审批' &&
            (record.state === '驳回' || record.state === '待提交')
          ">
            <span class="divider">|</span>
          </template>

          <!-- 3. 提交按钮：仅【驳回】【待提交】显示（本身已排除待审批） -->
          <template v-if="(record.state === '驳回' || record.state === '待提交') && record.state !== '通过'&& record.state !== '第一人审批同意'">
            <a-popconfirm
              title="确定提交吗?"
              @confirm="() => handleSubmit(record.id)"
            >
              <a class="action-item">提交</a>
            </a-popconfirm>
          </template>

          <!-- 4. 操作-审批详情分界线：仅在【有编辑/提交按钮】时显示（排除通过/待审批） -->
          <template v-if="
            record.state !== '通过' &&
            record.state !== '待审批' &&
            (record.state === '驳回' || record.state === '待提交')
          ">
            <span class="divider">|</span>
          </template>

          <!-- 5. 审批详情：所有状态均显示（待审批时仅显示此内容） -->
          <a @click="openApprovalMessageDrawer(record.id)" class="action-item">审批详情</a>
        </template>

      </a-table>
    </div>
    <!-- table区域 end -->
    <!-- 审批详情抽屉 -->
    <cw-approval-message-drawer
      ref="approvalMessageDrawer"
      @ok="handleApprovalMessageOk"
    ></cw-approval-message-drawer>
    <!-- 表单区域 -->
    <cw-aqhjwxjbt-tj-modal ref="modalForm" @ok="modalFormOk"/>

  </a-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import CwAqhjwxjbtTjModal from './modules/CwAqhjwxjbtTjModal'
  import CwAqhjwxjbtSubTable from './subTables/CwAqhjwxjbtSubTable'
  import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
  import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
  import '@/assets/less/TableExpand.less'
  import CwApprovalMessageDrawer from './modules/CwApprovalMessageModal.Style#Drawer.vue'
  export default {
    name: 'CwAqhjwxjbtTjList',
    mixins: [JeecgListMixin],
    components: {
      CwAqhjwxjbtTjModal,
      CwAqhjwxjbtSubTable,
      JDictSelectTag,
      CwApprovalMessageDrawer
    },
    data() {
      return {
        description: '安全奖及未休奖补贴提交列表管理页面',
        // 表头
        columns: [
          {
            title: '#',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: (t, r, index) => parseInt(index) + 1
          },
          {
            title: '单位',
            align: 'center',
            dataIndex: 'unit_dictText'
          },
          {
            title: '年度',
            align: 'center',
            dataIndex: 'year'
          },
          {
            title: '审批状态',
            align: 'center',
            dataIndex: 'state_dictText'
          },
          // {
          //   title: '审批时间',
          //   align: 'center',
          //   dataIndex: 'approvalTime',
          // },
          //
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            width:147,
            scopedSlots: { customRender: 'action' },
          },
        ],
        // 字典选项
        dictOptions: {},
        // 展开的行test
        expandedRowKeys: [],
        url: {
          list: '/cw/cwAqhjwxjbtTj/list',
          delete: '/cw/cwAqhjwxjbtTj/delete',
          deleteBatch: '/cw/cwAqhjwxjbtTj/deleteBatch',
          exportXlsUrl: '/cw/cwAqhjwxjbtTj/exportXls',
          importExcelUrl: '/cw/cwAqhjwxjbtTj/importExcel',
          tj: '/cw/cwAqhjwxjbtTj/tj'
        },
        superFieldList:[],
      }
    },
    created() {
      this.getSuperFieldList();
    },
    computed: {
      importExcelUrl() {
        return window._CONFIG['domianURL'] + this.url.importExcelUrl
      }
    },
    methods: {
      initDictConfig() {
      },

      handleExpand(expanded, record) {
        this.expandedRowKeys = []
        if (expanded === true) {
          this.expandedRowKeys.push(record.id)
        }
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'unit',text:'单位',dictCode:'unit'})
        fieldList.push({type:'string',value:'state',text:'审批状态',dictCode:'state'})
        fieldList.push({type:'datetime',value:'approvalTime',text:'审批时间'})
        fieldList.push({type:'string',value:'mainId',text:'登陆人id',dictCode:''})
        this.superFieldList = fieldList
      },
      // 提交处理方法
      handleSubmit(id) {
        if (!id) {
          this.$message.error('缺少记录ID')
          return
        }

        this.loading = true
        this.$http({
          url: this.url.tj,
          method: 'post',
          headers: this.tokenHeader,
          params: { id: id }
        }).then(res => {
          if (res.success) {
            this.$message.success('提交成功！')
            this.loadData() // 刷新列表
          } else {
            this.$message.error(res.message || '提交失败')
          }
        }).catch(err => {
          this.$message.error('提交出错：' + (err.message || err.toString()))
        }).finally(() => {
          this.loading = false
        })
      },

      // 打开审批详情抽屉
      openApprovalMessageDrawer(recordId) {
        this.$refs.approvalMessageDrawer.open(recordId)
      },

      // 审批详情抽屉确认回调
      handleApprovalMessageOk() {
        // 可在此处处理刷新逻辑（如刷新当前列表）
      }
    }
  }
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

// 操作按钮容器样式
.action-buttons {
  display: flex;
  align-items: center;
}

// 单个操作项样式
.action-item {
  cursor: pointer;
  padding: 0 4px;
  &:hover {
    color: #1890ff;
    text-decoration: underline;
  }
}

// 分界线样式
.divider {
  color: #e8e8e8;
  margin: 0 6px;
  user-select: none; // 防止选中
}
</style>